{include file='common/_meta' /}
<body>
<div class="container">
    <div class="layui-row">
        <div class="layui-col-md12 breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>管理员管理</cite></a>
                <a><cite>用户列表</cite></a>
            </span>
        </div>
    </div>
    <div class="layui-row">

        <form class="layui-form" action="" lay-filter="" style="padding-top: 15px;" id="search-form">
            <div class="layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">登录名：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="uname">
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型：</label>
                    <div class="layui-input-block">
                        <select name="utype" lay-search>
                            <option value="">全部</option>
                            <option value="admin">管理员</option>
                            <option value="clerk">销售</option>
                            <option value="channel">渠道</option>
                            <option value="plat">通道</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm4">
                <div class="layui-input-block">
                    <button class="layui-btn custom-sm-fluid" lay-submit lay-filter="custom-search">搜索</button>
                </div>
            </div>

        </form>

    </div>
    <div class="layui-col-md12">

        <table class="layui-hide" id="initdate" lay-filter="datatable"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">

                <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>

            </div>
        </script>

        <script type="text/html" id="barDemo">

            {{#  if (d.username != 'admin') {  }}

                <a class="layui-btn layui-btn-xs" lay-event="edit" title="用户编辑"><i class="layui-icon layui-icon-edit"></i></a>

                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除用户"><i class="layui-icon layui-icon-delete"></i></a>


                {{#  if (d.on_off == '1') {  }}

                <a class="layui-btn layui-btn-warm layui-btn-xs stop" lay-event="stop" title="禁用"><i class="layui-icon layui-icon-pause"></i></a>

                {{#  } else {  }}

                <a class="layui-btn layui-btn-normal layui-btn-xs start" lay-event="start" title="启用"><i class="layui-icon layui-icon-play"></i></a>

                {{#  }  }}

            {{#  }  }}

        </script>

    </div>

</div>
{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
layui.use(['table', 'form', 'layer', 'jquery'], function() {

    var $     = layui.$;
    var table = layui.table;
    var layer = layui.layer;
    var form  = layui.form;

    var tableIns = table.render({
        elem: '#initdate'
        ,url:'{:url('User/user')}'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,toolbar: '#toolbarDemo'//默认工具栏
        ,defaultToolbar: []
        ,method:'get'//请求方式
        ,where: {api: 1}
        ,page:true//开启分页
        ,limit:15//每页记录数
        ,limits: [15,20,30,40,50,60,70,80,90]
        ,cols: [[
            {type:'numbers', title: '序号'}
            ,{field:'username', title: '登录名'}
            ,{field:'name', title: '姓名'}
            ,{field:'user_type', title: '类型'}
            ,{field:'on_name', title: '关联', minWidth: 130}
            ,{field:'role_name', title: '角色', minWidth: 130}
            ,{field:'mark_up', title: '描述', minWidth: 160}
            ,{field:'on_off_', title: '是否已启用', minWidth: 100, align: 'center'}
            ,{fixed:'right', title: '操作', toolbar: '#barDemo', width: 100, unresize: true}
        ]]
    });

    //监听头工具栏事件
    table.on('toolbar(datatable)', function(obj) {

        switch(obj.event) {

            case 'add':
                layer.open({
                    type: 2,
                    title: '添加用户',
                    area: ['100%', '100%'],
                    content: '{:url('User/userHanPage')}'
                });
                break;
        };
    });
    // 监听搜索事件
    form.on('submit(custom-search)', function(data) {

        tableIns.reload({
            where: {uname: data.field.uname ,utype: data.field.utype ,api: 1 }
            ,page: {curr: 1}
        });

        $(window).resize()

        return false;
    });
    //监听工具条
    table.on('tool(datatable)', function(obj) {

        var data = obj.data;

        switch(obj.event) {

            case 'edit':
                layer.open({
                    type: 2,
                    title: '用户编辑',
                    area: ['100%', '100%'],
                    content: '{:url('User/userEditPage')}' + '?usid=' + data.id
                });
                break;

            case 'del':
                layer.confirm('确认要删除吗？', function(index) {
                    obj.del();
                    layer.close(index);

                    $.ajax({
                        type: 'POST',
                        url: '{:url('User/del')}',
                        data : {'usid': data.id},
                        success: function(data) {

                            if (data == true) {

                                obj.del();

                                layer.msg('已删除!', {icon:1,time:1000}, function() {
                                    tableIns.reload({
                                        where: {api: 1}
                                        ,page: {curr: 1}
                                    });
                                });
                            } else {

                                layer.msg(data, {icon:5,time:5000});
                            }
                        },
                        error:function(data) {

                            layer.msg("删除失败", {icon:5,time:5000});
                        },
                    });
                });

                break;

            case 'stop':

                layer.confirm('确认要禁用吗？',function(index) {

                    $.post('{:url('User/stopUser')}',{'uid': data.id, 'state': '0'}, function(data) {
                        layer.close(index);

                        if (data == '1') {

                            obj.tr.find('.stop').after('<a class="layui-btn layui-btn-normal layui-btn-xs start" lay-event="start" title="启用"><i class="layui-icon layui-icon-play"></i></a>');
                            obj.tr.find('.stop').remove();

                            //禁用
                            obj.tr.find(".status-kq").after('<span class="layui-badge status-jy">已禁用</span>');
                            obj.tr.find(".status-kq").remove();

                            layer.msg('已禁用!',{icon: 5,time:1000});
                        } else {

                            layer.msg('禁用失败!',{icon: 5,time:2000});
                        }
                    });
                });

                break;

            case 'start':

                layer.confirm('确认要启用吗？',function(index) {

                    $.post('{:url('User/stopUser')}',{'uid': data.id, 'state': '1'}, function(data) {
                        layer.close(index);

                        if (data == 1) {

                            obj.tr.find('.start').after('<a class="layui-btn layui-btn-warm layui-btn-xs stop" lay-event="stop" title="禁用"><i class="layui-icon layui-icon-pause"></i></a>');
                            obj.tr.find('.start').remove();

                            //禁用
                            obj.tr.find(".status-jy").after('<span class="layui-badge layui-bg-green status-kq">已开启</span>');
                            obj.tr.find(".status-jy").remove();

                            layer.msg('已开启!',{icon: 6,time:1000});
                        }else{
                            layer.msg('开启失败!',{icon: 5,time:2000});
                        }
                    });
                });

                break;

        };

    });

    /*解决操作按钮收缩，打开tips框不生效问题 start*/
    $(document).off('mousedown', '.layui-table-grid-down').on('mousedown', '.layui-table-grid-down', function (even) {

        table._tableTrCurr = $(this).closest('td');
    });

    $(document).off('click', '.layui-table-tips-main [lay-event]').on('click', '.layui-table-tips-main [lay-event]', function (even) {

        var elem = $(this);
        var tableTrCurr = table._tableTrCurr;

        if (!tableTrCurr) {

            return;
        }

        var layerIndex = elem.closest('.layui-table-tips').attr('times');
        layer.close(layerIndex);

        table._tableTrCurr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });
    /*解决操作按钮收缩，打开tips框不生效问题 end*/

});

function open_window(title, url, arg, w, h) {

    w = w || '600';
    h = h || '300';

    var index = layer.open({
        type: 2,
        title: title,
        content: url+arg,
        area:[w+'px',h+'px'],
    });
}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>